<template>
  <div class="personal-main">
    <div class="personal-money">
      <h3><i>还款计划</i></h3>

      <div class="repayment-list">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th>还款期数</th>
                  <th>还款日期</th>
                  <th>应还本金(元)</th>
                  <th>应还利息(元)</th>
                  <th>状态</th>
                  <th>是否逾期</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="repayment_content">
                <tr v-for="lendReturn in transFlowList" :key="lendReturn.id">
                  <td>{{ lendReturn.currentPeriod }}</td>
                  <td>{{ lendReturn.returnDate }}</td>
                  <td class="c-orange">￥{{ lendReturn.principal }}</td>
                  <td class="c-orange">￥{{ lendReturn.interest }}</td>
                  <td>{{ lendReturn.status === 0 ? '未还款' : '已还款' }}</td>
                  <td>
                    <span v-if="lendReturn.overdue">
                      是（逾期金额：{{ lendReturn.overdueTotal }}元）
                    </span>
                    <span v-else>否</span>
                  </td>
                  <td>
                    <a href="javascript:" @click="commitReturn(lendReturn.id)">
                      {{ lendReturn.status === 0 ? '还款' : '' }}
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        id: 0,
        transFlowList: [],
    };
  },

  created() {
    this.select();
  },

  methods: {
    select() {
      this.$axios.$get('/api/core/transFlow/investlist2').then((response) => {
        response.dataMap.list.forEach(l => {
          this.$axios.$get('/api/core/lendReturn/list/'+l.lend.id).then((response) => {
            console.log(response);
            this.transFlowList=this.transFlowList.concat(response.dataMap.list)
            
        });
        });
      });
    },
    commitReturn(lendReturnId) {
      this.$alert(
        '<div style="size: 18px;color: red;">您即将前往汇付宝确认还款</div>',
        '前往汇付宝资金托管平台',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '立即前往',
          callback: (action) => {
            if (action === 'confirm') {
              this.$axios
                .$post('/api/core/lendReturn/auth/commitReturn/' + lendReturnId)
                .then((response) => {
                  document.write(response.dataMap.formStr);
                });
            }
          },
        }
      );
    },
  },
};
</script>
